import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'

import router from './router'
import store from './store'
// swiper 使用
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
// 安装axios,下面需要全局对象的使用
import axios from 'axios'
//全局使用api，这是在 api文件中已经封装好了，你在main文件中挂载
import api from './api'
// 全局使用eventBus
import "./utils/eventBus"
// 使用swiper
Vue.use(VueAwesomeSwiper)

// 引入css公共
import "./assets/computed.css"


Vue.config.productionTip = false
// axios全局对象
Vue.prototype.$axios=axios
// api 全局使用
Vue.prototype.$api=api
// 全局对象的使用，在别的页面可以直接{{hello}}访问到，这就是根部的全局访问,为了表示hello是全局变量你可以加个$hello,这是为了更合理，加不加都不会报错
// Vue.prototype.hello="你很好"
Vue.prototype.$hello = "你很好"


/***directive
 * 自定义组件全局组件 v-focus directive是固定的，focus是自己起的名字。focus是传给需要的组件，而需要的组件的名字前面使用v-xxx
 *  el.focus()
*/
Vue.directive("focus",{
inserted(el){
  el.focus()
}
})
/***filter
 * 过滤器
 * ** */
Vue.filter("guolv",function (value) {
  // 若没有value直接输出
  if (!value) return;
  //否则输出以下
  return value+'--这是输出的内容直接绑定{{}}'
})
// 绑定bin
Vue.filter("bin",function (value) {
  // 若没有value直接输出
  if (!value) return;
  //否则输出以下
  return  'data-'+value+'--这是输出的内容直接绑定{{}}'
})

// 当然你也可以在这里面获取全局的变量比如使用data,不用函数，他的使用跟全局对象一样，在别的页面直接访问就行，比如在
new Vue({
  data: {
    lianjie: "www.baidu.com"
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app')
